<template>
<div>
    <input type="text" v-model="firstname" /> + 
    <input type="text" v-model="lastname" /> = 
    <input type="text" v-model="fullname" />
</div>
  
</template>

<script>
export default {
  data(){
    return{
      firstname:"",
      lastname:"",
      fullname:"",
    }
  },
  // 使用watch属性，可以监视data中指定数据的变化，然后触发watch中对应的function处理函数
  watch:{
    firstname:function(newValue , oldValue){
      console.log('watch监视 firstname 的变化')
      console.log(newValue + " - "+oldValue)
      this.fullname = newValue + this.lastname
    },
    lastname:function(newValue , oldValue){
      console.log('watch监视 lastname 的变化')
      console.log(newValue + " - "+oldValue)
      this.fullname = this.firstname + newValue
    }
  }
}
</script>

<style scoped>

</style>